<template>
	<view class="detail-page" :class="{ 'has-footer': orderStatus === '已取消' || orderStatus === '已退款' }">
		<!-- 自定义顶部导航栏（匹配custom样式） -->
		<view class="top-nav">
			<view class="nav-back" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<text class="nav-title">{{ isEvaluating ? orderData.serviceItem : (orderStatus + '订单') }}</text>
			<view class="nav-right">
				<text class="nav-icon">⋯</text>
				<text class="nav-icon">○</text>
			</view>
		</view>
		<!-- 状态标签（已取消/已退款时显示） -->
		<view class="status-label" v-if="orderStatus === '已取消' || orderStatus === '已退款'">
			<text class="status-text">{{ orderStatus }}</text>
		</view>
		<!-- 评价页面显示 -->
		<template v-if="isEvaluating">
			<!-- 服务评价区域 -->
			<view class="evaluate-card">
				<text class="evaluate-title">服务评价</text>
				<view class="store-evaluate">
					<image src="/static/store.png" class="store-thumb" mode="aspectFill" />
					<view class="store-info">
						<text class="store-name">{{ orderData.store }}</text>
						<view class="star-rating">
							<text class="star" v-for="(item, index) in 5" :key="index"
								:class="{ active: index < rating }" @click="setRating(index + 1)">★</text>
						</view>
					</view>
				</view>
			</view>


			<!-- 评语区域 -->
			<view class="evaluate-card">
				<text class="evaluate-title">评语(0-299字)</text>
				<textarea class="comment-input" v-model="comment" placeholder="请留下您宝贵的意见和建议......." maxlength="299"
					@input="onCommentInput"></textarea>
				<text class="char-count">{{ comment.length }}/299</text>
			</view>

			<!-- 照片上传区域 -->
			<view class="evaluate-card">
				<text class="evaluate-title">照片(选填)</text>
				<view class="photo-upload">
					<view class="photo-item" v-for="(photo, index) in photos" :key="index">
						<image :src="photo" class="photo-img" mode="aspectFill" />
						<view class="photo-delete" @click="deletePhoto(index)">×</view>
					</view>
					<view class="photo-upload-btn" @click="uploadPhoto" v-if="photos.length < 9">
						<text class="plus-icon">+</text>
						<text class="upload-text">上传照片</text>
					</view>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-section">
				<button class="submit-btn" @click="submitEvaluate" :disabled="rating === 0">提交</button>
			</view>
		</template>
		<!-- 详情内容 -->
		<!-- 已取消/已退款订单的显示 -->
		<template v-else-if="orderStatus === '已取消' || orderStatus === '已退款'">
			<!-- 订单信息卡片 -->
			<view class="detail-card">
				<text class="card-title">订单信息</text>
				<view class="detail-info">
					<text class="info-item">订单号: {{ orderData.orderNo }}</text>
					<text class="info-item">服务项目: {{ orderData.serviceItem }}</text>
					<view class="info-item store-item">
						<text>服务门店: {{ orderData.store }}</text>
						<text class="store-icon">✈</text>
					</view>
					<text class="info-item">下单时间: {{ orderData.orderTime }}</text>
					<text class="info-item">预约时间: {{ orderData.reserveTime }}</text>
					<text class="info-item">备注: </text>
				</view>
			</view>
			<!-- 订单详情卡片 -->
			<view class="detail-card">
				<text class="card-title">订单详情</text>
				<view class="amount-detail">
					<view class="amount-item">
						<text class="item-name">车辆精洗</text>
						<text class="item-value">¥39.90</text>
					</view>
					<view class="amount-item">
						<text class="item-name">车辆附加费用</text>
						<text class="item-value">0</text>
					</view>
					<view class="amount-divider"></view>
					<view class="amount-item">
						<text class="item-name">原价</text>
						<text class="item-value">¥59.90</text>
					</view>
					<view class="amount-item">
						<text class="item-name">店家优惠</text>
						<text class="item-value discount">- ¥20</text>
					</view>
					<view class="amount-item">
						<text class="item-name">优惠券</text>
						<text class="item-value discount">- ¥10</text>
					</view>
					<view class="amount-divider"></view>
					<view class="amount-item total">
						<text class="item-name">支付金额</text>
						<text class="item-value green">¥29.9</text>
					</view>
				</view>
			</view>
		</template>
		<!-- 其他状态的显示 -->
		<template v-else>
			<view class="detail-card">
				<view class="detail-header">
					<text class="order-no">订单号:{{ orderData.orderNo }}</text>
				</view>
				<view class="detail-info">
					<text class="service-item">服务项目: {{ orderData.serviceItem }}</text>
					<text class="service-store">服务门店: {{ orderData.store }}</text>
					<text class="order-time">下单时间: {{ orderData.orderTime }}</text>
					<text class="reserve-time">预约时间: {{ orderData.reserveTime }}</text>
					<text class="car-info">车辆: {{ orderData.carInfo }}</text>
				</view>
				<!-- 核销码（仅待使用显示） -->
				<view class="verify-code" v-if="currentTab === 2">
					<text class="code-label">核销码:</text>
					<text class="code-value">{{ orderData.verifyCode }}</text>
				</view>
				<!-- 金额明细 -->
				<view class="amount-detail">
					<text class="detail-title">订单详情</text>
					<view class="amount-item"><text class="item-name">车辆精洗</text><text class="item-value">¥39.90</text>
					</view>
					<view class="amount-item"><text class="item-name">车辆附加费用</text><text class="item-value">¥0</text>
					</view>
					<view class="amount-item"><text class="item-name">原价</text><text class="item-value">¥59.90</text>
					</view>
					<view class="amount-item"><text class="item-name">店家优惠</text><text class="item-value">-¥20</text>
					</view>
					<view class="amount-item"><text class="item-name">优惠券</text><text class="item-value">-¥10</text>
					</view>
					<view class="amount-item total">
						<text class="item-name">{{ orderData.amountType }}</text>
						<text class="item-value red">{{ orderData.amount }}元</text>
					</view>
				</view>
				<!-- 操作按钮 -->
				<view class="btn-group">
					<view class="btn gray" v-if="showBtn1" @click="handleBtn1">{{ btn1Text }}</view>
					<view class="btn blue" @click="handleBtn2">{{ btn2Text }}</view>
					<view class="btn gray" v-if="showBtn3" @click="contactService">联系客服</view>
				</view>
			</view>
		</template>
		<!-- 底部操作栏（已取消/已退款订单） -->
		<view class="footer-bar" v-if="orderStatus === '已取消' || orderStatus === '已退款'">
			<view class="footer-left" @click="contactService">
				<text class="service-icon">👤</text>
				<text class="service-text">联系客服</text>
			</view>
			<view class="footer-right">
				<button class="footer-btn" @click="handleBtn2">再来一单</button>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				orderData: {},
				currentTab: 0,
				orderStatus: '',
				showBtn1: false,
				showBtn3: false,
				btn1Text: '',
				btn2Text: '',
				// 评价相关数据
				isEvaluating: false,
				rating: 0,
				comment: '',
				photos: []
			};
		},
		onLoad(options) {
			// 接收列表页传递的订单数据（序列化后解析）
			// 先解码再解析JSON
			this.orderData = JSON.parse(decodeURIComponent(options.orderData));
			this.setOrderStatus();
			this.setBtnConfig();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			setOrderStatus() {
				if (this.orderData.statusText === '待支付') {
					this.currentTab = 1;
					this.orderStatus = '待支付';
					this.showBtn3 = true;
				} else if (this.orderData.statusText === '待使用') {
					this.currentTab = 2;
					this.orderStatus = '待使用';
				} else if (this.orderData.statusText === '待评价') {
					this.currentTab = 3;
					this.orderStatus = '待评价';
				} else if (this.orderData.statusText === '已取消') {
					this.currentTab = 0;
					this.orderStatus = '已取消';
				} else if (this.orderData.statusText === '已退款') {
					this.currentTab = 0;
					this.orderStatus = '已退款';
				} else if (this.orderData.statusText === '已完成') {
					this.currentTab = 0;
					this.orderStatus = '已完成';
				}
			},
			setBtnConfig() {
				if (this.orderStatus === '已取消' || this.orderStatus === '已退款') {
					// 已取消/已退款订单不显示按钮组，使用底部操作栏
					this.showBtn1 = false;
					this.showBtn3 = false;
					this.btn2Text = '再来一单';
				} else {
					switch (this.currentTab) {
						case 1: // 待支付
							this.showBtn1 = true;
							this.btn1Text = '取消订单';
							this.btn2Text = '立即支付';
							break;
						case 2: // 待使用
							this.showBtn1 = true;
							this.btn1Text = '申请退款';
							this.btn2Text = '扫码结算';
							this.showBtn3 = true;
							break;
						case 3: // 待评价
							this.showBtn1 = true;
							this.btn1Text = '立即评价';
							this.btn2Text = '再来一单';
							this.showBtn3 = true;
							break;
						case 0: // 全部订单的已取消/已退款/已完成
							this.showBtn1 = false;
							this.btn2Text = this.orderData.btn2Text || '再来一单';
							this.showBtn3 = true;
							break;
					}
				}
			},
			handleBtn1() {
				// 原有按钮逻辑不变（可对接实际接口）
				if (this.btn1Text === '取消订单') {
					// 切换显示已取消订单内容
					this.orderData.statusText = '已取消';
					this.setOrderStatus();
					this.setBtnConfig();
					uni.showToast({
						title: '订单已取消',
						icon: 'success'
					});
				} else if (this.btn1Text === '申请退款') {
					// 切换显示已退款订单内容
					this.orderData.statusText = '已退款';
					this.setOrderStatus();
					this.setBtnConfig();
					uni.showToast({
						title: '退款申请已提交',
						icon: 'success'
					});
				} else if (this.btn1Text === '立即评价') {
					// 切换显示评价页面
					this.isEvaluating = true;
				}
			},
			handleBtn2() {
				if (this.btn2Text === '立即支付') {
					uni.showToast({
						title: '支付成功'
					});
					setTimeout(() => uni.navigateBack(), 1500);
				} else if (this.btn2Text === '扫码结算') {
					uni.scanCode({
						success: (res) => {
							uni.showToast({
								title: '核销成功'
							});
							setTimeout(() => uni.navigateBack(), 1500);
						}
					});
				} else if (this.btn2Text === '再来一单' || this.btn2Text === '重新下单') {
					uni.navigateTo({
						url: '/pages/order/create' // 可跳转到下单页
					});
				}
			},
			contactService() {
				uni.showToast({
					title: '已跳转客服页面'
				});
			},
			// 设置评分
			setRating(score) {
				this.rating = score;
			},
			// 评语输入
			onCommentInput(e) {
				this.comment = e.detail.value;
			},
			// 上传照片
			uploadPhoto() {
				uni.chooseImage({
					count: 9 - this.photos.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.photos = this.photos.concat(res.tempFilePaths);
					},
					fail: (err) => {
						console.error('选择图片失败', err);
					}
				});
			},
			// 删除照片
			deletePhoto(index) {
				this.photos.splice(index, 1);
			},
			// 提交评价
			submitEvaluate() {
				if (this.rating === 0) {
					uni.showToast({
						title: '请选择评分',
						icon: 'none'
					});
					return;
				}


				// 这里可以调用后端API提交评价
				uni.showToast({
					title: '评价提交成功',
					icon: 'success',
					success: () => {
						setTimeout(() => {
							// 提交成功后，切换回订单详情页面
							this.isEvaluating = false;
							// 更新订单状态为已评价
							this.orderData.statusText = '待评价';
							this.setOrderStatus();
							this.setBtnConfig();
						}, 1500);
					}
				});
			}
		}
	};
</script>
<!-- 原有样式不变，确保与列表页风格统一 -->

<style scoped>
	.detail-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		font-size: 14px;
		color: #333;
	}


	.detail-page.has-footer {
		padding-bottom: 120rpx;
		/* 为底部操作栏留出空间（已取消/已退款订单） */
	}

	/* 评价页面样式 */
	.evaluate-card {
		background-color: #fff;
		margin: 15px;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		margin-bottom: 15px;
	}

	.evaluate-title {
		display: block;
		font-weight: 600;
		font-size: 16px;
		color: #333;
		margin-bottom: 15px;
	}

	/* 服务评价区域 */
	.store-evaluate {
		display: flex;
		align-items: flex-start;
		gap: 15px;
	}

	.store-thumb {
		width: 80px;
		height: 80px;
		border-radius: 8px;
		flex-shrink: 0;
	}

	.store-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.store-name {
		font-size: 15px;
		color: #333;
		font-weight: 500;
	}

	.star-rating {
		display: flex;
		gap: 5px;
	}

	.star {
		font-size: 24px;
		color: #ddd;
		line-height: 1;
		cursor: pointer;
	}

	.star.active {
		color: #ffd700;
	}

	/* 评语输入区域 */
	.comment-input {
		width: 100%;
		min-height: 120px;
		padding: 12px;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		font-size: 14px;
		color: #333;
		box-sizing: border-box;
		margin-bottom: 8px;
	}

	.char-count {
		text-align: right;
		font-size: 12px;
		color: #999;
	}

	/* 照片上传区域 */
	.photo-upload {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.photo-item {
		position: relative;
		width: calc(33.333% - 7px);
		aspect-ratio: 1;
		border-radius: 8px;
		overflow: hidden;
	}

	.photo-img {
		width: 100%;
		height: 100%;
	}

	.photo-delete {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 24px;
		height: 24px;
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		line-height: 1;
		cursor: pointer;
	}

	.photo-upload-btn {
		width: calc(33.333% - 7px);
		aspect-ratio: 1;
		border: 1px dashed #ccc;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		background-color: #fafafa;
	}

	.plus-icon {
		font-size: 32px;
		color: #999;
		line-height: 1;
		font-weight: 300;
	}

	.upload-text {
		font-size: 12px;
		color: #999;
	}

	/* 提交按钮区域 */
	.submit-section {
		padding: 20px 15px;
		background-color: #f5f5f5;
	}

	.submit-btn {
		width: 100%;
		height: 44px;
		line-height: 44px;
		background-color: #2c83f2;
		color: #fff;
		border: none;
		border-radius: 22px;
		font-size: 16px;
		font-weight: 500;
	}

	.submit-btn:disabled {
		background-color: #ccc;
		color: #999;
	}

	/* 顶部导航栏 */
	.top-nav {
		height: 48px;
		line-height: 48px;
		background-color: #2c83f2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		color: #fff;
		font-size: 48rpx;
		font-weight: 300;
		line-height: 1;
	}

	.nav-title {
		color: #fff;
		font-size: 16px;
		font-weight: 500;
		flex: 1;
		text-align: center;
	}

	.nav-right {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.nav-icon {
		color: #fff;
		font-size: 32rpx;
		line-height: 1;
	}

	/* 状态标签 */
	.status-label {
		background-color: #fff;
		padding: 20rpx 30rpx;
		margin: 0 30rpx;
		border-radius: 0 0 16rpx 16rpx;
	}

	.status-text {
		color: #f00;
		font-size: 28rpx;
		font-weight: 500;
	}

	/* 详情卡片容器 */
	.detail-card {
		background-color: #fff;
		margin: 15px;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}

	.card-title {
		display: block;
		font-weight: 600;
		font-size: 16px;
		color: #333;
		margin-bottom: 15px;
	}

	/* 订单号区域 */
	.detail-header {
		padding: 5px 0 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.order-no {
		color: #666;
		font-size: 13px;
	}

	/* 服务信息区域 */
	.detail-info {
		padding: 15px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.detail-info text {
		display: block;
		margin-bottom: 12px;
		line-height: 1.5;
	}

	.service-item {
		color: #333;
		font-weight: 500;
		font-size: 15px;
	}

	.service-store,
	.order-time,
	.reserve-time,
	.car-info {
		color: #666;
	}

	/* 核销码区域 */
	.verify-code {
		padding: 15px 0;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.code-label {
		color: #666;
		margin-right: 10px;
	}

	.code-value {
		color: #2c83f2;
		font-family: "Courier New", monospace;
		letter-spacing: 2px;
		padding: 5px 10px;
		background-color: #f5f8ff;
		border-radius: 4px;
		flex: 1;
	}

	/* 金额明细区域 */
	.amount-detail {
		padding: 15px 0;
	}

	.detail-title {
		display: block;
		font-weight: 500;
		margin-bottom: 15px;
		color: #333;
		font-size: 15px;
	}

	.amount-item {
		display: flex;
		justify-content: space-between;
		padding: 8px 0;
		color: #666;
		border-bottom: 1px dashed #f0f0f0;
	}

	.amount-item:last-child {
		border-bottom: none;
	}

	.amount-item.total {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #f0f0f0;
	}

	.amount-item.total .item-name {
		font-weight: 600;
		color: #333;
	}

	.item-value.red {
		color: #e53935;
		font-weight: 600;
	}

	.item-value.discount {
		color: #f00;
		font-weight: 500;
	}

	.item-value.green {
		color: #4caf50;
		font-weight: 600;
	}

	.amount-divider {
		height: 1px;
		background-color: #e0e0e0;
		margin: 8px 0;
	}

	/* 已取消订单的订单信息样式 */
	.info-item {
		display: block;
		color: #333;
		font-size: 14px;
		margin-bottom: 12px;
		line-height: 1.5;
	}

	.store-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.store-icon {
		color: #2c83f2;
		font-size: 18px;
		margin-left: 8px;
	}

	/* 底部操作栏 */
	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #f5f5f5;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
	}

	.footer-left {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.service-icon {
		font-size: 40rpx;
		color: #2c83f2;
	}

	.service-text {
		font-size: 28rpx;
		color: #333;
	}

	.footer-right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.footer-btn {
		background-color: #2c83f2;
		color: #fff;
		border: none;
		border-radius: 40rpx;
		padding: 20rpx 60rpx;
		font-size: 28rpx;
		font-weight: 500;
	}

	/* 按钮组区域 */
	.btn-group {
		display: flex;
		gap: 15px;
		margin-top: 20px;
		padding-top: 10px;
	}

	.btn {
		flex: 1;
		height: 44px;
		line-height: 44px;
		text-align: center;
		border-radius: 22px;
		font-size: 15px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.btn:active {
		transform: scale(0.98);
	}

	.btn.gray {
		background-color: #f5f5f5;
		color: #666;
	}

	.btn.blue {
		background-color: #2c83f2;
		color: #fff;
	}
</style>